<template>
  <backContainer>
    <card>
      <div class="header_search">
        <div class="ipt_search">
          <el-select
            @change="getCourse"
            size="small"
            class="search"
            v-model="form.batch"
            placeholder="请选择学期"
            filterable
          >
            <el-option
              v-for="item in schoolSemesterList"
              :key="item.semesterId"
              :label="item.semesterName"
              :value="item.semesterId"
            >
            </el-option>
          </el-select>
          <el-select
            size="small"
            class="search"
            v-model="form.courseId"
            filterable
            clearable
            placeholder="请选择课程"
            @change="getClass"
          >
            <el-option
              v-for="(item, index) in courses"
              :key="index"
              :label="item.courseName"
              :value="item.courseId"
            >
            </el-option>
          </el-select>
          <el-select
            size="small"
            style="width: 110px"
            v-model="form.classType"
            placeholder="请选择"
            @change="getClass"
          >
            <el-option label="行政班" :value="1"></el-option>
            <el-option label="授课班级" :value="2"></el-option>
          </el-select>
          <el-select
            size="small"
            class="search"
            v-model="form.classId"
            filterable
            clearable
            placeholder="请选择班级"
            @visible-change="handleCheck"
          >
            <template v-if="form.classType == 1">
              <el-option
                v-for="(item, index) in classes"
                :key="index"
                :label="item.className"
                :value="item.classId"
              >
              </el-option>
            </template>
            <template v-if="form.classType == 2">
              <el-option
                v-for="(item, index) in classes"
                :key="index"
                :label="item.schedulingName"
                :value="item.id"
              >
              </el-option>
            </template>
          </el-select>
        </div>
        <div class="flex">
          <el-button
            type="primary"
            icon="el-icon-search"
            size="small"
            @click="generate"
          >生成报告
          </el-button>
          <el-button size="small" type="primary" @click="edit"
          >{{ editStatus == 0 ? '编辑' : '结束编辑' }}
          </el-button>
          <el-button size="small" type="primary" @click="handleDown"
          >导出文档
          </el-button>
        </div>
        <div class="tips">
          注:1.表格中成绩统计是根据课程配分计算的成绩;2.学生未参与考核会被判定为缺考。
        </div>
      </div>
      <!-- 内容 -->
      <div class="scoreList">
        <div class="mianContent" ref="pdf">
          <div
            style="
              padding: 130px 0 8px 0;
              font-size: 32px;
              font-weight: 800;
              text-align: center;
            "
          >
            {{ schoolName }}
          </div>
          <div
            class="center"
            style="
              padding: 8px 0 100px 0;
              font-size: 32px;
              font-weight: 800;
              text-align: center;
            "
          >
            教学质量分析
          </div>
          <table style="border: 1px;">
            <tr>
              <td style="width: 150px;" class="td1 center gray">课程</td>
              <td style="width: 150px;" class="td1 center">
                {{ info.courseName }}
              </td>
              <td style="width: 150px;" class="td1 center gray">班级</td>
              <td style="width: 150px;" class="td1 center">
                {{ info.className }}
              </td>
              <td style="width: 150px;" class="td1 center gray">考试人次</td>
              <td style="width: 150px;" class="td1 center">
                {{ info.examNum ? info.examNum : 0 }}
              </td>
              <td style="width: 150px;" class="td1 center gray">缺考人次</td>
              <td style="width: 150px;" class="td1 center">
                {{ info.missNum ? info.missNum : 0 }}
              </td>
            </tr>
          </table>
          <div
            style="
              padding: 20px 20px;
              border-left: 1px solid black;
              border-right: 1px solid black;
              font-size: 18px;
              font-weight: 600;
              text-align: center;
            "
          >
            考试成绩统计
          </div>
          <table style="border: 1px;">
            <tr>
              <td style="width: 150px" class="td1rows center gray" rowspan="2">
                90-100分<br/>（优秀）
              </td>
              <td style="width: 150px" class="td1 center">
                {{ info.excellentNum ? info.excellentNum : 0 }}人
              </td>
              <td style="width: 150px" class="td1rows center gray" rowspan="2">
                80-90分<br/>（良好）
              </td>
              <td style="width: 150px" class="td1 center">
                {{ info.goodNum ? info.goodNum : 0 }}人
              </td>
              <td style="width: 150px" class="td1rows center gray" rowspan="2">
                70-79分<br/>（中等）
              </td>
              <td style="width: 150px" class="td1 center">
                {{ info.mediumNum ? info.mediumNum : 0 }}人
              </td>
              <td style="width: 150px" class="td1rows center gray" rowspan="2">
                60-69分<br/>（及格）
              </td>
              <td style="width: 150px" class="td1 center">
                {{ info.passNum ? info.passNum : 0 }}人
              </td>
            </tr>
            <tr>
              <td style="width: 150px" class="td1 center">
                {{ info.excellentPer ? info.excellentPer : '0%' }}
              </td>
              <td style="width: 150px" class="td1 center">
                {{ info.goodPer ? info.goodPer : '0%' }}
              </td>
              <td style="width: 150px" class="td1 center">
                {{ info.mediumPer ? info.mediumPer : '0%' }}
              </td>
              <td style="width: 150px" class="td1 center">
                {{ info.passPer ? info.passPer : '0%' }}
              </td>
            </tr>
            <tr>
              <td style="width: 150px" class="td1rows center gray" rowspan="2">
                60以下<br/>（不及格）
              </td>
              <td style="width: 150px" class="td1 center">
                {{ info.unPassNum ? info.unPassNum : 0 }}人
              </td>
              <td style="width: 150px" class="td1rows center gray" rowspan="2">
                最高分
              </td>
              <td style="width: 150px" class="td1rows center" rowspan="2">
                {{ info.maxScore ? info.maxScore.score : '' }}
              </td>
              <td style="width: 150px" class="td1rows center gray" rowspan="2">
                最低分
              </td>
              <td style="width: 150px" class="td1rows center" rowspan="2">
                {{ info.minScore ? info.minScore.score : '' }}
              </td>
              <td style="width: 150px" class="td1rows center gray" rowspan="2">
                平均分
              </td>
              <td style="width: 150px" class="td1rows center" rowspan="2">
                {{ info.avgScore || info.avgScore == 0 ? info.avgScore : '' }}
              </td>
            </tr>
            <tr>
              <td style="width: 150px" class="td1 center">
                {{ info.unPassPer ? info.unPassPer : '0%' }}
              </td>
            </tr>
          </table>
          <div
            style="
              padding: 20px 20px;
              border-left: 1px solid black;
              border-right: 1px solid black;
              font-size: 18px;
              font-weight: 600;
              text-align: center;
            "
          >
            考试情况分析
          </div>
          <table style="border: 1px;">
            <tr>
              <td style="width: 280px" class="td1 center gray" colspan="2">
                试题命名类型
              </td>
              <td style="width: 150px" class="td1 center gray">试题百分比</td>
              <td style="width: 730px" class="td1 center gray" colspan="2">
                学生得分情况
              </td>
            </tr>
            <tr>
              <td style="width: 280px" class="td1 center gray" colspan="2">
                基础知识、基本理论、基本技能试题
              </td>
              <td style="width: 150px" class="td1 center">
                <div v-if="editStatus == 1">
                  <el-input
                    v-model="info.analyticEntity.basePer"
                    size="mini"
                    style="width: 50px"
                  >
                  </el-input>
                  %
                </div>

                <div v-else>
                  {{ info.analyticEntity ? info.analyticEntity.basePer : '' }}%
                </div>
              </td>
              <td style="width: 730px" class="td1 center" colspan="2">
                <el-input
                  v-if="editStatus == 1"
                  v-model="info.analyticEntity.baseInfo"
                  size="mini"
                  style="width: 100%"
                  type="textarea"
                  :rows="8"
                >
                </el-input>
                <div v-else>
                  {{ info.analyticEntity ? info.analyticEntity.baseInfo : '' }}
                </div>
              </td>
            </tr>
            <tr>
              <td style="width: 280px" class="td1 center gray" colspan="2">
                中等难度题
              </td>
              <td style="width: 150px" class="td1 center">
                <div v-if="editStatus == 1">
                  <el-input
                    v-model="info.analyticEntity.mediumPer"
                    size="mini"
                    style="width: 50px"
                  >
                  </el-input>
                  %
                </div>
                <div v-else>
                  {{
                    info.analyticEntity ? info.analyticEntity.mediumPer : ''
                  }}%
                </div>
              </td>
              <td style="width: 730px" class="td1 center" colspan="2">
                <el-input
                  v-if="editStatus == 1"
                  v-model="info.analyticEntity.mediumInfo"
                  size="mini"
                  style="width: 100%"
                  type="textarea"
                  :rows="8"
                >
                </el-input>
                <div v-else>
                  {{
                    info.analyticEntity ? info.analyticEntity.mediumInfo : ''
                  }}
                </div>
              </td>
            </tr>

            <tr>
              <td style="width: 280px" class="td1 center gray" colspan="2">
                一定难度和深度试题
              </td>
              <td style="width: 150px" class="td1 center">
                <div v-if="editStatus == 1">
                  <el-input
                    v-if="editStatus == 1"
                    v-model="info.analyticEntity.deepPer"
                    size="mini"
                    style="width: 50px"
                  >
                  </el-input>
                  %
                </div>
                <div v-else>
                  {{ info.analyticEntity ? info.analyticEntity.deepPer : '' }}%
                </div>
              </td>
              <td style="width: 730px" class="td1 center" colspan="2">
                <el-input
                  v-if="editStatus == 1"
                  v-model="info.analyticEntity.deepInfo"
                  size="mini"
                  style="width: 100%"
                  type="textarea"
                  :rows="8"
                >
                </el-input>
                <div v-else>
                  {{ info.analyticEntity ? info.analyticEntity.deepInfo : '' }}
                </div>
              </td>
            </tr>
            <tr>
              <td style="width: 80px" class="td2 center gray">
                考试结果与成绩综合分析
              </td>
              <td style="width: 600px" class="td2text" colspan="3">
                <div class="td2text_tip">
                  （提示：1.对上述试题结构情况进行简要分析和综述；2.简要分析学生考试情况）
                </div>
                <el-input
                  v-if="editStatus == 1"
                  v-model="info.analyticEntity.analyze"
                  size="mini"
                  style="width: 100%"
                  type="textarea"
                  :rows="8"
                >
                </el-input>
                <div v-else>
                  {{ info.analyticEntity ? info.analyticEntity.analyze : '' }}
                </div>
              </td>
              <td style="width: 400px" class="td2text">
                <div class="dailyCompletion" ref="dailyCompletion"></div>
              </td>
            </tr>
            <tr>
              <td style="width: 80px" class="td2 center gray">问题与建议</td>
              <td style="width: 1000px" class="td2text" colspan="4">
                <el-input
                  v-if="editStatus == 1"
                  v-model="info.analyticEntity.problemAndSuggest"
                  size="mini"
                  style="width: 100%"
                  type="textarea"
                  :rows="8"
                >
                </el-input>
                <div v-else>
                  {{
                    info.analyticEntity
                      ? info.analyticEntity.problemAndSuggest
                      : ''
                  }}
                </div>
              </td>
            </tr>
            <tr>
              <td style="width: 80px" class="td2 center gray">教学小结</td>

              <td style="width: 1000px" class="td2text rela" colspan="4">
                <div class="td2text_tip">
                  （提示：1.可对以下内容做简要小结：本学期授课计划安排、教学进度、讲授情况、作业布置、辅导答疑、实训实习情况是否增加内容或补充材料；考核方法、教学手段等采取了什么措施、成效如何；教学任务完成情况如何；其他。2.
                  简要分析学生学习情况、作业完成状况、考试与成绩等；3.
                  提出改进措施或建议。）
                </div>
                <el-input
                  v-if="editStatus == 1"
                  v-model="info.analyticEntity.teachingSummary"
                  size="mini"
                  style="width: 100%"
                  type="textarea"
                  :rows="8"
                >
                </el-input>
                <div v-else>
                  {{
                    info.analyticEntity
                      ? info.analyticEntity.teachingSummary
                      : ''
                  }}
                </div>
                <div class="signature absolute">
                  <div class="flexEnd teaLine">
                    教师:
                    <div class="teaLineTrim"></div>
                    (签名)
                  </div>
                  <div class="timeline flexEnd">
                    年
                    <div class="timelineTrim"></div>
                    月
                    <div class="timelineTrim"></div>
                    日
                  </div>
                </div>
              </td>
            </tr>
            <tr>
              <td style="width: 80px" class="td2 center gray">教研组意见</td>
              <td style="width: 1000px" class="td2text rela" colspan="4">
                <div class="signature absolute">
                  <div class="flexEnd teaLine">
                    教师:
                    <div class="teaLineTrim"></div>
                    (签名)
                  </div>
                  <div class="timeline flexEnd">
                    年
                    <div class="timelineTrim"></div>
                    月
                    <div class="timelineTrim"></div>
                    日
                  </div>
                </div>
                <el-input
                  v-if="editStatus == 1"
                  v-model="info.analyticEntity.groupOpinion"
                  size="mini"
                  style="width: 100%"
                  type="textarea"
                  :rows="8"
                >
                </el-input>
                <div v-else>
                  {{
                    info.analyticEntity ? info.analyticEntity.groupOpinion : ''
                  }}
                </div>
              </td>
            </tr>
            <tr>
              <td style="width: 80px" class="td2 center gray">部门意见</td>
              <td style="width: 1000px" class="td2text rela" colspan="4">
                <div class="signature absolute">
                  <div class="flexEnd teaLine">
                    教师:
                    <div class="teaLineTrim"></div>
                    (签名)
                  </div>
                  <div class="timeline flexEnd">
                    年
                    <div class="timelineTrim"></div>
                    月
                    <div class="timelineTrim"></div>
                    日
                  </div>
                </div>
                <el-input
                  v-if="editStatus == 1"
                  v-model="info.analyticEntity.partOpinion"
                  size="mini"
                  style="width: 100%"
                  type="textarea"
                  :rows="8"
                >
                </el-input>
                <div v-else>
                  {{
                    info.analyticEntity ? info.analyticEntity.partOpinion : ''
                  }}
                </div>
              </td>
            </tr>
          </table>
        </div>
      </div>
    </card>
  </backContainer>
</template>

<script>
import * as echarts from 'echarts'
import htmlToPdf from '@/utils/htmlToPdf'
import {
  analytic,
  updateAnalytic,
  getClassList
} from '@/api/statistics/statistics'
import {
  getSchoolSemesterList,
  getCourseBySemesterId,
  getAllSchedulingList
} from '@/api/teach/teach'

export default {
  data() {
    return {
      //查询参数
      form: {
        courseId: '',
        workstationId: 0,
        classId: '',
        batch: '',
        classType: 1
      },
      schoolSemesterList: [],
      workstations: [],
      classes: [],
      courses: [],
      info: {
        examNum: 0,
        missNum: 0,
        passNum: 0,
        excellentNum: 0,
        mediumNum: 0,
        goodNum: 0,
        passPer: 0,
        excellentPer: 0,
        mediumPer: 0,
        goodPer: 0,
        unPassNum: 0,
        unPassPer: 0,
        analyticEntity: [{
          basePer: 0,
          baseInfo: '',
          mediumInfo: '',
          deepPer: 0,
          deepInfo: '',
          teachingSummary: '',
          groupOpinion: '',
          partOpinion: '',
          analyze: '',
          problem: '',
          opinion: '',
          problemAndSuggest: '',
          designSuggest: '',
          resourceSuggest: '',
        }],
      },
      editStatus: 0,
      schoolName: ''
    }
  },
  created() {
    this.form.batch = this.$store.getters.schoolInfo.semesterId
  },
  mounted() {
    this.schoolName = this.$store.getters.schoolInfo.schoolName
    this.getCourse()
    this.getSchoolSemester()
    this.setOptionCdn()
  },
  methods: {
    setOptionCdn() {
      let arr = [
        this.info.unPassNum ? this.info.unPassNum : 0,
        this.info.passNum ? this.info.passNum : 0,
        this.info.mediumNum ? this.info.mediumNum : 0,
        this.info.goodNum ? this.info.goodNum : 0,
        this.info.excellentNum ? this.info.excellentNum : 0
      ]
      console.log(this.$refs.dailyCompletion)
      let myChart = echarts.init(this.$refs.dailyCompletion)
      let option
      option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: ['60分以下', '60-69', '70-79', '80-89', '90-99'],
            axisTick: {
              alignWithLabel: true
            }
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: '分数分析',
            type: 'bar',
            barWidth: '60%',
            data: arr
          }
        ]
      }
      option && myChart.setOption(option)
    },
    async getSchoolSemester() {
      let res = await getSchoolSemesterList()
      const { code, rows } = res
      if (code == 200) {
        this.schoolSemesterList = rows
      }
    },
    // 生成报告
    async generate() {
      if (!this.form.classId) {
        this.$message('请先选择班级')
        return false
      }
      if (!this.form.courseId) {
        this.$message('请先选择课程')
        return false
      }
      if (!this.form.batch) {
        this.$message('请先选择学期')
        return false
      }
      let params = { ...this.form }
      let res = await analytic(params)
      this.info = res.data
      this.setOptionCdn()
    },
    async getCourse() {
      let params = {
        teacherId: this.$store.getters.teacherId
      }
      let res = await getCourseBySemesterId(this.form.batch, params)
      if (res.code == 200) {
        this.courses = res.data
      }
    },
    // 下拉获取班级
    handleCheck(type) {
      console.log('下拉获取班级')
      if (type) {
        if (!this.form.courseId) {
          this.$message('请先选择课程')
        }

        this.getClass()
      }
    },
    //根据课程获取班级
    async getClass() {
      this.form.classId = ''
      this.classes = []
      if (!this.form.courseId) {
        return
      }
      if (this.form.classType == 1) {
        let params = {
          pageNum: 1,
          pageSize: 9999,
          courseId: this.form.courseId,
          semesterId: this.form.batch,
          userId: this.$store.getters.userId
        }
        let res = await getClassList(params)
        this.classes = res.rows
      } else {
        let params = {
          courseId: this.form.courseId,
          userId: this.$store.getters.userId,
          semesterId: this.form.batch
        }
        let res = await getAllSchedulingList(params)
        this.classes = res.data
      }
    },

    async edit() {
      if (!this.info.courseName) {
        this.$message('请先生成报告')
        return false
      }
      if (this.editStatus == 0) {
        this.editStatus = 1
      } else {
        if (
          (this.info.analyticEntity.problem == '') &
          (this.info.analyticEntity.opinion == '') &
          (this.info.analyticEntity.designSuggest == '') &
          (this.info.analyticEntity.resourceSuggest == '') &
          (this.info.principalName == '')
        ) {
          this.$message('内容不能为空')
          return false
        }
        await updateAnalytic(this.info.analyticEntity)
        this.$message({ duration: 1500, type: 'success', message: '编辑成功' })
        await this.generate()
        this.editStatus = 0
      }
    },
    handleDown() {
      if (!this.info.courseName) {
        this.$message('请先生成报告')
        return false
      }
      if (this.editStatus == 1) {
        this.$message('请先完成编辑')
        return false
      }
      htmlToPdf.downloadPDF(this.$refs.pdf, '教学质量分析')
    }
  }
}
</script>

<style scoped lang="scss">
.dailyCompletion {
  width: 380px;
  height: 350px;
}

.header_search {
  width: 1200px;
  background: white;
  border-radius: 16px;
  padding: 20px;
  box-sizing: border-box;
  display: flex;
  align-items: center;

  .ipt_search {
    display: flex;

    .search {
      width: 160px;
      margin-right: 20px;
    }
  }
}

table {
  td {
    font-size: 16px;
  }
}

.scoreList {
  ::v-deep .el-textarea__inner {
    font-size: 14px !important;
  }

  box-sizing: border-box;
  padding: 0 20px 20px 20px;
  overflow-y: scroll;
  height: calc(100vh - 68px - 120px);
}

.gray {
  background: rgb(248, 248, 249);
}

.td1rows {
  height: 100px;
  box-sizing: border-box;
  padding: 0 0 0 0;
}

.td1 {
  height: 50px;
}

.center {
  text-align: center;
}

.center {
  text-align: center;
}

.td2text_tip {
  font-size: 14px;
  margin-bottom: 5px;
}

.td2text {
  vertical-align: top;
  min-height: 350px;
  box-sizing: border-box;
  padding: 5px 5px;
  // line-height: 1.5;
  .signature {
    bottom: 10px;
    right: 20px;
    font-size: 14px;

    .teaLine {
      .teaLineTrim {
        width: 150px;
      }
    }

    .timeline {
      padding-right: 40px;
      margin-top: 20px;

      .timelineTrim {
        width: 50px;
      }
    }
  }
}

.td2 {
  height: 350px;
  box-sizing: border-box;
  padding: 5px 30px;
  // line-height: 1.5;
}

table {
  border-collapse: collapse;
  border: 1px solid #000000;
}

.box {
  padding: 40px 40px 0 40px;
  margin-top: 24px;
  width: 1440px;
  height: calc(100vh - 68px - 48px);
  background: #ffffff;
  border-radius: 16px;
  box-sizing: border-box;
}

::v-deep .el-input--medium .el-input__inner {
  height: 60px;
  font-size: 16px;
}

.tips {
  margin-left: 25px;
  width: 200px;
  color: #c1c4cb;
  font-size: 12px;
}
</style>
